<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员积分中心 - 心声社交</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #4A6FFF;
            --primary-light: #E8EEFF;
            --secondary: #FF6B6B;
            --success: #2ECC71;
            --warning: #FFC107;
            --dark: #2D3436;
            --gray: #636E72;
            --light-gray: #F1F5F8;
            --border: #DFE6E9;
            --radius: 10px;
            --shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            color: var(--dark);
            background-color: #F8FAFC;
            line-height: 1.6;
            padding-top: 2rem;
            padding-bottom: 3rem;
        }
        
        .container {
            max-width: 1140px;
        }
        
        .page-header {
            margin-bottom: 2.5rem;
            text-align: center;
        }
        
        .page-title {
            font-size: 2rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 0.5rem;
        }
        
        .page-subtitle {
            color: var(--gray);
            font-size: 1.1rem;
        }
        
        .points-card {
            background-color: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            border: none;
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .balance-section {
            text-align: center;
            padding: 1.5rem;
            background: linear-gradient(135deg, var(--primary-light) 0%, #D6E1FF 100%);
            border-radius: var(--radius);
            margin-bottom: 1.5rem;
        }
        
        .balance-title {
            font-size: 1.1rem;
            color: var(--gray);
            margin-bottom: 0.5rem;
        }
        
        .balance-amount {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }
        
        .points-unit {
            font-size: 1.2rem;
            margin-left: 0.5rem;
        }
        
        .points-actions {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .btn {
            padding: 0.6rem 1.5rem;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .btn-primary {
            background-color: var(--primary);
            color: white;
            border: none;
        }
        
        .btn-primary:hover {
            background-color: #3A5FE8;
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--primary);
            color: var(--primary);
        }
        
        .btn-outline:hover {
            background-color: var(--primary-light);
        }
        
        .tabs-container {
            margin-bottom: 2rem;
            border-bottom: 1px solid var(--border);
        }
        
        .tab-item {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            color: var(--gray);
            text-decoration: none;
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .tab-item.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        
        .tab-item:hover:not(.active) {
            color: var(--dark);
            border-bottom-color: var(--border);
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        /* 积分明细样式 */
        .filter-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        .filter-options {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
        }
        
        .filter-tag {
            padding: 0.35rem 0.85rem;
            background-color: var(--light-gray);
            color: var(--dark);
            border-radius: 20px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .filter-tag.active {
            background-color: var(--primary);
            color: white;
        }
        
        .search-box {
            position: relative;
        }
        
        .search-input {
            padding: 0.5rem 1rem 0.5rem 2.5rem;
            border: 1px solid var(--border);
            border-radius: 20px;
            font-size: 0.9rem;
            width: 220px;
            transition: all 0.3s ease;
        }
        
        .search-input:focus {
            outline: none;
            border-color: var(--primary);
            width: 280px;
        }
        
        .search-icon {
            position: absolute;
            left: 0.85rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
        }
        
        .transactions-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .transaction-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            background-color: white;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            transition: all 0.2s ease;
        }
        
        .transaction-item:hover {
            transform: translateX(5px);
            box-shadow: var(--shadow);
        }
        
        .transaction-info {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .transaction-icon {
            width: 45px;
            height: 45px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }
        
        .icon-earn {
            background-color: rgba(46, 204, 113, 0.1);
            color: var(--success);
        }
        
        .icon-spend {
            background-color: rgba(255, 107, 107, 0.1);
            color: var(--secondary);
        }
        
        .transaction-details {
            flex: 1;
        }
        
        .transaction-title {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }
        
        .transaction-time {
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        .transaction-amount {
            font-weight: 600;
            font-size: 1.1rem;
        }
        
        .amount-earn {
            color: var(--success);
        }
        
        .amount-spend {
            color: var(--secondary);
        }
        
        /* 积分兑换样式 */
        .rewards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .reward-card {
            background-color: white;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .reward-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
        }
        
        .reward-image {
            height: 160px;
            overflow: hidden;
        }
        
        .reward-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .reward-card:hover .reward-image img {
            transform: scale(1.05);
        }
        
        .reward-info {
            padding: 1.25rem;
        }
        
        .reward-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            font-size: 1.1rem;
        }
        
        .reward-description {
            color: var(--gray);
            font-size: 0.9rem;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .reward-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .reward-points {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            color: var(--primary);
            font-weight: 600;
        }
        
        .reward-stock {
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        .reward-btn {
            width: 100%;
            padding: 0.6rem;
            text-align: center;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .reward-btn:hover {
            background-color: #3A5FE8;
        }
        
        .reward-btn.disabled {
            background-color: var(--light-gray);
            color: var(--gray);
            cursor: not-allowed;
        }
        
        /* 等级特权样式 */
        .levels-container {
            margin-bottom: 2rem;
        }
        
        .level-item {
            display: flex;
            align-items: center;
            padding: 1.5rem;
            background-color: white;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            margin-bottom: 1rem;
            position: relative;
            overflow: hidden;
        }
        
        .level-item.current {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(74, 111, 255, 0.1);
        }
        
        .level-badge {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: var(--light-gray);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--gray);
            margin-right: 1.5rem;
            z-index: 1;
        }
        
        .level-item.bronze .level-badge {
            background-color: #FFF3E0;
            color: #E67E22;
        }
        
        .level-item.silver .level-badge {
            background-color: #ECEFF1;
            color: #90A4AE;
        }
        
        .level-item.gold .level-badge {
            background-color: #FFFDE7;
            color: #FFB300;
        }
        
        .level-item.platinum .level-badge {
            background-color: #E0F7FA;
            color: #00ACC1;
        }
        
        .level-item.diamond .level-badge {
            background-color: #E8EAF6;
            color: #5C6BC0;
        }
        
        .level-info {
            flex: 1;
            z-index: 1;
        }
        
        .level-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 0.5rem;
        }
        
        .level-title {
            font-weight: 600;
            font-size: 1.2rem;
            margin: 0;
        }
        
        .current-badge {
            display: inline-block;
            padding: 0.15rem 0.6rem;
            background-color: var(--primary);
            color: white;
            border-radius: 4px;
            font-size: 0.75rem;
        }
        
        .level-points {
            color: var(--gray);
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }
        
        .level-privileges {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }
        
        .privilege-tag {
            padding: 0.25rem 0.75rem;
            background-color: var(--light-gray);
            color: var(--dark);
            border-radius: 4px;
            font-size: 0.85rem;
        }
        
        .level-item.current .privilege-tag {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .level-progress {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background-color: rgba(74, 111, 255, 0.05);
            z-index: 0;
        }
        
        /* 分页样式 */
        .pagination-container {
            display: flex;
            justify-content: center;
            margin-top: 2rem;
        }
        
        .pagination {
            display: flex;
            gap: 0.5rem;
        }
        
        .page-item {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.95rem;
        }
        
        .page-item:not(.active):not(.disabled):hover {
            background-color: var(--light-gray);
            color: var(--primary);
        }
        
        .page-item.active {
            background-color: var(--primary);
            color: white;
        }
        
        .page-item.disabled {
            color: var(--border);
            cursor: not-allowed;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .rewards-grid {
                grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            }
            
            .level-privileges {
                gap: 0.5rem;
            }
            
            .privilege-tag {
                font-size: 0.8rem;
                padding: 0.2rem 0.6rem;
            }
        }
        
        @media (max-width: 576px) {
            .page-title {
                font-size: 1.75rem;
            }
            
            .balance-amount {
                font-size: 2rem;
            }
            
            .points-actions {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
                justify-content: center;
            }
            
            .tab-item {
                padding: 0.75rem 0.75rem;
                font-size: 0.85rem;
            }
            
            .filter-bar {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .search-input {
                width: 100%;
            }
            
            .search-input:focus {
                width: 100%;
            }
            
            .transaction-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .transaction-amount {
                align-self: flex-end;
            }
            
            .level-item {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .level-badge {
                margin-bottom: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">会员积分中心</h1>
            <p class="page-subtitle">管理你的积分，兑换专属奖励</p>
        </div>
        
        <!-- 积分余额卡片 -->
        <div class="card points-card">
            <div class="balance-section">
                <div class="balance-title">当前可用积分</div>
                <div class="balance-amount">
                    3,540 <span class="points-unit">积分</span>
                </div>
                <p class="text-muted">积分可用于兑换奖励或参与特殊活动</p>
                <div class="points-actions">
                    <button class="btn btn-primary">
                        <i class="fas fa-gift"></i> 立即兑换
                    </button>
                    <button class="btn btn-outline">
                        <i class="fas fa-history"></i> 积分明细
                    </button>
                </div>
            </div>
            
            <!-- 积分标签页 -->
            <div class="tabs-container">
                <div class="tab-item active" data-tab="transactions">积分明细</div>
                <div class="tab-item" data-tab="rewards">积分兑换</div>
                <div class="tab-item" data-tab="levels">等级特权</div>
            </div>
            
            <!-- 积分明细内容 -->
            <div class="tab-content active" id="transactions-content">
                <div class="filter-bar">
                    <div class="filter-options">
                        <div class="filter-tag active">全部</div>
                        <div class="filter-tag">获得积分</div>
                        <div class="filter-tag">使用积分</div>
                        <div class="filter-tag">近7天</div>
                        <div class="filter-tag">近30天</div>
                    </div>
                    <div class="search-box">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" class="search-input" placeholder="搜索积分记录...">
                    </div>
                </div>
                
                <div class="transactions-list">
                    <div class="transaction-item">
                        <div class="transaction-info">
                            <div class="transaction-icon icon-earn">
                                <i class="fas fa-calendar-check"></i>
                            </div>
                            <div class="transaction-details">
                                <div class="transaction-title">每日签到</div>
                                <div class="transaction-time">今天 08:45</div>
                            </div>
                        </div>
                        <div class="transaction-amount amount-earn">+10</div>
                    </div>
                    
                    <div class="transaction-item">
                        <div class="transaction-info">
                            <div class="transaction-icon icon-earn">
                                <i class="fas fa-comment"></i>
                            </div>
                            <div class="transaction-details">
                                <div class="transaction-title">发表评论</div>
                                <div class="transaction-time">昨天 15:30</div>
                            </div>
                        </div>
                        <div class="transaction-amount amount-earn">+15</div>
                    </div>
                    
                    <div class="transaction-item">
                        <div class="transaction-info">
                            <div class="transaction-icon icon-spend">
                                <i class="fas fa-ticket-alt"></i>
                            </div>
                            <div class="transaction-details">
                                <div class="transaction-title">兑换活动门票</div>
                                <div class="transaction-time">2023-10-14 19:20</div>
                            </div>
                        </div>
                        <div class="transaction-amount amount-spend">-500</div>
                    </div>
                    
                    <div class="transaction-item">
                        <div class="transaction-info">
                            <div class="transaction-icon icon-earn">
                                <i class="fas fa-pen"></i>
                            </div>
                            <div class="transaction-details">
                                <div class="transaction-title">发布热门树洞</div>
                                <div class="transaction-time">2023-10-13 11:45</div>
                            </div>
                        </div>
                        <div class="transaction-amount amount-earn">+100</div>
                    </div>
                    
                    <div class="transaction-item">
                        <div class="transaction-info">
                            <div class="transaction-icon icon-earn">
                                <i class="fas fa-trophy"></i>
                            </div>
                            <div class="transaction-details">
                                <div class="transaction-title">完成"评论达人"成就</div>
                                <div class="transaction-time">2023-10-10 09:15</div>
                            </div>
                        </div>
                        <div class="transaction-amount amount-earn">+300</div>
                    </div>
                    
                    <div class="transaction-item">
                        <div class="transaction-info">
                            <div class="transaction-icon icon-spend">
                                <i class="fas fa-gem"></i>
                            </div>
                            <div class="transaction-details">
                                <div class="transaction-title">兑换钻石会员体验7天</div>
                                <div class="transaction-time">2023-10-05 20:30</div>
                            </div>
                        </div>
                        <div class="transaction-amount amount-spend">-1000</div>
                    </div>
                </div>
                
                <div class="pagination-container">
                    <div class="pagination">
                        <div class="page-item disabled">
                            <i class="fas fa-chevron-left"></i>
                        </div>
                        <div class="page-item active">1</div>
                        <div class="page-item">2</div>
                        <div class="page-item">3</div>
                        <div class="page-item">4</div>
                        <div class="page-item">5</div>
                        <div class="page-item">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 积分兑换内容 -->
            <div class="tab-content" id="rewards-content">
                <div class="filter-bar">
                    <div class="filter-options">
                        <div class="filter-tag active">全部奖励</div>
                        <div class="filter-tag">虚拟物品</div>
                        <div class="filter-tag">实体商品</div>
                        <div class="filter-tag">特权服务</div>
                        <div class="filter-tag">活动门票</div>
                    </div>
                    <div class="search-box">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" class="search-input" placeholder="搜索兑换奖励...">
                    </div>
                </div>
                
                <div class="rewards-grid">
                    <div class="reward-card">
                        <div class="reward-image">
                            <img src="https://picsum.photos/seed/reward1/400/300" alt="会员专属头像框">
                        </div>
                        <div class="reward-info">
                            <h3 class="reward-title">会员专属头像框</h3>
                            <p class="reward-description">彰显会员身份的专属头像框，有效期30天</p>
                            <div class="reward-meta">
                                <div class="reward-points">
                                    <i class="fas fa-star"></i> 200 积分
                                </div>
                                <div class="reward-stock">库存: 128</div>
                            </div>
                            <button class="reward-btn">立即兑换</button>
                        </div>
                    </div>
                    
                    <div class="reward-card">
                        <div class="reward-image">
                            <img src="https://picsum.photos/seed/reward2/400/300" alt="社区线下活动门票">
                        </div>
                        <div class="reward-info">
                            <h3 class="reward-title">社区线下活动门票</h3>
                            <p class="reward-description">参与社区组织的线下交流活动，结识更多朋友</p>
                            <div class="reward-meta">
                                <div class="reward-points">
                                    <i class="fas fa-star"></i> 500 积分
                                </div>
                                <div class="reward-stock">库存: 36</div>
                            </div>
                            <button class="reward-btn">立即兑换</button>
                        </div>
                    </div>
                    
                    <div class="reward-card">
                        <div class="reward-image">
                            <img src="https://picsum.photos/seed/reward3/400/300" alt="钻石会员7天体验">
                        </div>
                        <div class="reward-info">
                            <h3 class="reward-title">钻石会员7天体验</h3>
                            <p class="reward-description">体验钻石会员全部特权，包括无广告、专属客服等</p>
                            <div class="reward-meta">
                                <div class="reward-points">
                                    <i class="fas fa-star"></i> 1000 积分
                                </div>
                                <div class="reward-stock">库存: 50</div>
                            </div>
                            <button class="reward-btn">立即兑换</button>
                        </div>
                    </div>
                    
                    <div class="reward-card">
                        <div class="reward-image">
                            <img src="https://picsum.photos/seed/reward4/400/300" alt="定制周边礼品">
                        </div>
                        <div class="reward-info">
                            <h3 class="reward-title">定制周边礼品</h3>
                            <p class="reward-description">社区定制版周边礼品，包含笔记本、马克杯套装</p>
                            <div class="reward-meta">
                                <div class="reward-points">
                                    <i class="fas fa-star"></i> 2000 积分
                                </div>
                                <div class="reward-stock">库存: 15</div>
                            </div>
                            <button class="reward-btn">立即兑换</button>
                        </div>
                    </div>
                    
                    <div class="reward-card">
                        <div class="reward-image">
                            <img src="https://picsum.photos/seed/reward5/400/300" alt="免广告特权">
                        </div>
                        <div class="reward-info">
                            <h3 class="reward-title">免广告特权30天</h3>
                            <p class="reward-description">30天内免除所有社区广告，享受纯净浏览体验</p>
                            <div class="reward-meta">
                                <div class="reward-points">
                                    <i class="fas fa-star"></i> 300 积分
                                </div>
                                <div class="reward-stock">库存: 无限</div>
                            </div>
                            <button class="reward-btn">立即兑换</button>
                        </div>
                    </div>
                    
                    <div class="reward-card">
                        <div class="reward-image">
                            <img src="https://picsum.photos/seed/reward6/400/300" alt="专属客服服务">
                        </div>
                        <div class="reward-info">
                            <h3 class="reward-title">专属客服服务</h3>
                            <p class="reward-description">获得7天专属客服优先响应服务，解决问题更快捷</p>
                            <div class="reward-meta">
                                <div class="reward-points">
                                    <i class="fas fa-star"></i> 400 积分
                                </div>
                                <div class="reward-stock">库存: 20</div>
                            </div>
                            <button class="reward-btn">立即兑换</button>
                        </div>
                    </div>
                </div>
                
                <div class="pagination-container">
                    <div class="pagination">
                        <div class="page-item disabled">
                            <i class="fas fa-chevron-left"></i>
                        </div>
                        <div class="page-item active">1</div>
                        <div class="page-item">2</div>
                        <div class="page-item">3</div>
                        <div class="page-item">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 等级特权内容 -->
            <div class="tab-content" id="levels-content">
                <p class="text-muted mb-4">提升会员等级可解锁更多特权，等级根据累计积分自动提升</p>
                
                <div class="levels-container">
                    <div class="level-item bronze">
                        <div class="level-badge">1</div>
                        <div class="level-info">
                            <div class="level-header">
                                <h3 class="level-title">青铜会员</h3>
                            </div>
                            <div class="level-points">所需积分: 0 - 499</div>
                            <div class="level-privileges">
                                <span class="privilege-tag">基础社区功能</span>
                                <span class="privilege-tag">每日签到积分</span>
                                <span class="privilege-tag">发表内容权限</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="level-item silver current">
                        <div class="level-badge">2</div>
                        <div class="level-info">
                            <div class="level-header">
                                <h3 class="level-title">白银会员</h3>
                                <span class="current-badge">当前等级</span>
                            </div>
                            <div class="level-points">所需积分: 500 - 999 (你已获得650积分)</div>
                            <div class="level-privileges">
                                <span class="privilege-tag">青铜会员全部特权</span>
                                <span class="privilege-tag">会员专属签到奖励</span>
                                <span class="privilege-tag">减少广告展示</span>
                                <span class="privilege-tag">积分兑换9折优惠</span>
                            </div>
                        </div>
                        <div class="level-progress" style="width: 65%;"></div>
                    </div>
                    
                    <div class="level-item gold">
                        <div class="level-badge">3</div>
                        <div class="level-info">
                            <div class="level-header">
                                <h3 class="level-title">黄金会员</h3>
                            </div>
                            <div class="level-points">所需积分: 1000 - 2999</div>
                            <div class="level-privileges">
                                <span class="privilege-tag">白银会员全部特权</span>
                                <span class="privilege-tag">无广告体验</span>
                                <span class="privilege-tag">专属头像框</span>
                                <span class="privilege-tag">积分兑换8折优惠</span>
                                <span class="privilege-tag">优先参与活动</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="level-item platinum">
                        <div class="level-badge">4</div>
                        <div class="level-info">
                            <div class="level-header">
                                <h3 class="level-title">铂金会员</h3>
                            </div>
                            <div class="level-points">所需积分: 3000 - 9999</div>
                            <div class="level-privileges">
                                <span class="privilege-tag">黄金会员全部特权</span>
                                <span class="privilege-tag">专属客服</span>
                                <span class="privilege-tag">内容优先推荐</span>
                                <span class="privilege-tag">积分兑换7折优惠</span>
                                <span class="privilege-tag">每月免费礼物</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="level-item diamond">
                        <div class="level-badge">5</div>
                        <div class="level-info">
                            <div class="level-header">
                                <h3 class="level-title">钻石会员</h3>
                            </div>
                            <div class="level-points">所需积分: 10000+</div>
                            <div class="level-privileges">
                                <span class="privilege-tag">铂金会员全部特权</span>
                                <span class="privilege-tag">社区荣誉标识</span>
                                <span class="privilege-tag">专属活动邀请</span>
                                <span class="privilege-tag">积分兑换6折优惠</span>
                                <span class="privilege-tag">定制化服务</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card points-card">
                    <h3 style="margin-bottom: 1rem; font-weight: 600;">快速获取积分</h3>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>每日签到</div>
                            <span class="text-success">+10积分/天</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>发表评论</div>
                            <span class="text-success">+15积分/条</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>发布树洞</div>
                            <span class="text-success">+30积分/条</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>完成成就任务</div>
                            <span class="text-success">+100-1000积分/个</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>参与社区活动</div>
                            <span class="text-success">+50-500积分/次</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 标签页切换功能
            const tabItems = document.querySelectorAll('.tab-item');
            
            tabItems.forEach(tab => {
                tab.addEventListener('click', function() {
                    // 移除所有标签的active类
                    tabItems.forEach(t => t.classList.remove('active'));
                    // 给当前点击的标签添加active类
                    this.classList.add('active');
                    
                    // 隐藏所有内容容器
                    const tabContents = document.querySelectorAll('.tab-content');
                    tabContents.forEach(content => content.classList.remove('active'));
                    
                    // 显示对应的内容容器
                    const tabId = this.getAttribute('data-tab');
                    document.getElementById(`${tabId}-content`).classList.add('active');
                });
            });
            
            // 筛选标签功能
            const filterTags = document.querySelectorAll('.filter-tag');
            
            filterTags.forEach(tag => {
                tag.addEventListener('click', function() {
                    // 找到同级的所有筛选标签
                    const siblingTags = this.parentElement.querySelectorAll('.filter-tag');
                    siblingTags.forEach(t => t.classList.remove('active'));
                    // 给当前点击的标签添加active类
                    this.classList.add('active');
                });
            });
            
            // 积分操作按钮快速切换
            const pointsActions = document.querySelectorAll('.points-actions .btn');
            pointsActions.forEach(button => {
                button.addEventListener('click', function() {
                    if (this.textContent.includes('立即兑换')) {
                        // 切换到积分兑换标签
                        tabItems.forEach(t => t.classList.remove('active'));
                        document.querySelector('.tab-item[data-tab="rewards"]').classList.add('active');
                        
                        tabContents.forEach(content => content.classList.remove('active'));
                        document.getElementById('rewards-content').classList.add('active');
                    } else if (this.textContent.includes('积分明细')) {
                        // 切换到积分明细标签
                        tabItems.forEach(t => t.classList.remove('active'));
                        document.querySelector('.tab-item[data-tab="transactions"]').classList.add('active');
                        
                        tabContents.forEach(content => content.classList.remove('active'));
                        document.getElementById('transactions-content').classList.add('active');
                    }
                });
            });
            
            // 兑换按钮交互
            const rewardButtons = document.querySelectorAll('.reward-btn');
            
            rewardButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const rewardCard = this.closest('.reward-card');
                    const rewardTitle = rewardCard.querySelector('.reward-title').textContent;
                    const rewardPoints = rewardCard.querySelector('.reward-points').textContent;
                    
                    if (this.classList.contains('disabled')) {
                        alert('该奖励暂时无法兑换');
                        return;
                    }
                    
                    if (confirm(`确定要兑换 "${rewardTitle}" 吗？将消耗 ${rewardPoints}`)) {
                        this.textContent = '兑换成功';
                        this.classList.add('disabled');
                        
                        // 更新积分余额
                        const balanceElement = document.querySelector('.balance-amount');
                        const currentBalance = parseInt(balanceElement.textContent.replace(/,/g, '').match(/\d+/)[0]);
                        const pointsToSpend = parseInt(rewardPoints.match(/\d+/)[0]);
                        const newBalance = currentBalance - pointsToSpend;
                        
                        balanceElement.innerHTML = `${newBalance.toLocaleString()} <span class="points-unit">积分</span>`;
                        
                        // 添加到积分明细
                        const transactionsList = document.querySelector('.transactions-list');
                        const newTransaction = document.createElement('div');
                        newTransaction.className = 'transaction-item';
                        newTransaction.innerHTML = `
                            <div class="transaction-info">
                                <div class="transaction-icon icon-spend">
                                    <i class="fas fa-gift"></i>
                                </div>
                                <div class="transaction-details">
                                    <div class="transaction-title">兑换${rewardTitle}</div>
                                    <div class="transaction-time">刚刚</div>
                                </div>
                            </div>
                            <div class="transaction-amount amount-spend">-${pointsToSpend}</div>
                        `;
                        
                        transactionsList.prepend(newTransaction);
                    }
                });
            });
            
            // 分页功能
            const pageItems = document.querySelectorAll('.page-item:not(.disabled)');
            
            pageItems.forEach(item => {
                if (!item.classList.contains('disabled')) {
                    item.addEventListener('click', function() {
                        if (!this.innerHTML.includes('chevron')) { // 不是箭头按钮
                            const siblingPages = this.parentElement.querySelectorAll('.page-item');
                            siblingPages.forEach(p => p.classList.remove('active'));
                            this.classList.add('active');
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>
    
